<template>
  <view class="my-container">
    <!-- 顶部背景图 -->
    <view class="header-bg">
      <image src="/static/page_icons/my-mingchao2.png" mode="aspectFill"></image>
    </view>

    <!-- 用户信息卡片 -->
    <view class="user-info-card">
      <view class="user-info">
        <image class="avatar" src="/static/page_icons/my-mingchao.png" mode="aspectFill"></image>
        <view class="user-detail">
          <view class="name-row">
            <text class="nickname">{{employeeInfo.username || '张三'}}</text>
            <!-- 添加性别图标 -->
            <uni-icons type="person" :color="employeeInfo.gender === 1 ? '#007AFF' : '#FF69B4'" size="16">
            </uni-icons>
          </view>
          <text class="employeeId">工号：{{employeeInfo.employeeId || '0000000'}}</text>
        </view>
      </view>

      <view class="em-info">
        <view class="info-row">
          <uni-icons type="staff" size="18" color="#666"></uni-icons>
          <text class="em-label"> {{employeeInfo.deptName || '研发部2'}}</text>
        </view>

        <view class="info-row">
          <uni-icons type="person-filled" size="18" color="#666"></uni-icons>
          <text class="em-desc">{{employeeInfo.role || '员工1'}}</text>
        </view>

        <view class="info-row">
          <uni-icons type="medal" size="18" color="#666"></uni-icons>
          <text>职位：</text>
          <text class="amount">{{employeeInfo.position || '软件工程教师'}}</text>
        </view>
      </view>
    </view>

    <!-- 菜单列表 -->
    <view class="menu-list">
      <uni-list :border="false">
        <uni-list-item title="重启小程序" showArrow @click="handleFunction('home')" link>
          <template v-slot:header>
            <uni-icons type="refresh" size="22" color="#666"></uni-icons>
          </template>
        </uni-list-item>

        <uni-list-item title="订阅审批通知" showArrow @click="handleFunction('question')" link>
          <template v-slot:header>
            <uni-icons type="help" size="22" color="#0d21a7"></uni-icons>
          </template>
        </uni-list-item>

        <uni-list-item title="个人资料" showArrow @click="handleFunction('userinfo-detail')" link>
          <template v-slot:header>
            <uni-icons type="person" size="22" color="#666"></uni-icons>
          </template>
        </uni-list-item>

        <uni-list-item title="联系我们" showArrow @click="handleFunction('message')" link>
          <template v-slot:header>
            <uni-icons type="phone-filled" size="22" color="#666"></uni-icons>
          </template>
        </uni-list-item>
      </uni-list>
    </view>
    <!-- 添加退出登录按钮 -->
    <view class="logout-section">
      <button class="logout-btn" @click="handleLogout">退出登录</button>
    </view>

    <view class="version">
      <uni-icons type="info" size="14" color="#999" style="margin-right: 6rpx;"></uni-icons>
      <text>当前版本 {{version}}</text>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapActions
  } from 'vuex'

  export default {
    name: 'my-userinfo',
    computed: {
      ...mapState('m_user', ['employeeInfo', 'token']),
      /**
       * @description  判断employeeInfo是否为空
       */
      isEmployeeInfoEmpty() {
        return !this.employeeInfo || Object.keys(this.employeeInfo).length === 0
      }
    },
    watch: {
      // 监听 token 变化
      token: {
        immediate: true,
        async handler(newVal) {
          if (newVal && newVal !== '') {
            // 确保员工信息已加载
            if (this.isEmployeeInfoEmpty) {
              await this.GetEmployeeList();
            }
          }
        }
      }
    },
    data() {
      return {
        version: '1.1.7',
        // 延时器的timerId,看后期的功能需求
        timer: null
      }
    },
    mounted() {
      if (this.token && this.isEmployeeInfoEmpty) {
        this.getEmployeeMessage();
      }
    },
    onPullDownRefresh() {
      this.getEmployeeMessage(() => uni.stopPullDownRefresh())
    },
    methods: {
      ...mapActions('m_user', ['LoginOut', 'GetEmployeeList']),
      ...mapActions('permission', ['resetPermissions']),
      handleLogout() {
        this.resetPermissions() // 重置权限的状态
        this.LoginOut()
        // 清空本地的打卡记录
      },
      getEmployeeMessage(cb) {
        this.GetEmployeeList()
        cb && cb()
      },
      handleFunction(type) {
        switch (type) {
          case 'home':
            uni.switchTab({
              url: '/pages/home/home'
            })
            break;
          case 'question':
            // return uni.$showMsg('此功能暂未开放，请之后再试')
            this.handleSubscribeTo()
            break;
          case 'userinfo-detail':
            uni.navigateTo({
              url: '/pages/userinfo-detail/userinfo-detail?info=' + JSON.stringify(this.employeeInfo)
            })
            break;
          case 'message':
            return uni.$showMsg('此功能暂未开放，请之后再试')
            break;
        }
      },
      /**
       * @ @description  处理订阅通知的方法，分为成功和失败
       */
      handleSubscribeTo() {
        uni.requestSubscribeMessage({
          tmplIds: ['9CXogE3APx3liTS6ItI8eIZjON2xrpVqS_V8psU5jME'],
          success(res) {
            const tmplId = '9CXogE3APx3liTS6ItI8eIZjON2xrpVqS_V8psU5jME';
            if (res[tmplId] === 'accept') {
              uni.$showModal({
                content: '订阅成功!!!!'
              })
            } else if (res[tmplId] === 'reject') {
              uni.$showModal({
                content: '你取消了订阅!!!!'
              })
            }
          },
          fail(err) {
            console.log(err)
            return uni.$showModal({
              content: '订阅失败!!!'
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .my-container {
    min-height: 100vh;
    background-color: #f7f7f7;

    .header-bg {
      height: 260rpx;
      width: 100%;

      image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .user-info-card {
      position: relative;
      margin: 30rpx;
      margin-top: -50rpx;
      background-color: #fff;
      border-radius: 16rpx;
      padding-bottom: 30rpx;
      box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

      .user-info {
        padding: 30rpx;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f5f5f5;

        .avatar {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          margin-right: 20rpx;
        }

        .user-detail {
          flex: 1;

          .name-row {
            display: flex;
            align-items: center;

            .nickname {
              color: #333;
              font-size: 32rpx;
              font-weight: bold;
              margin-right: 10rpx;
            }
          }

          .employeeId {
            font-size: 24rpx;
            color: #666;
            margin-top: 8rpx;
          }
        }
      }

      .em-info {
        padding: 30rpx;

        .info-row {
          display: flex;
          align-items: center;
          margin-bottom: 16rpx;

          .em-label {
            font-size: 28rpx;
            color: #333;
            font-weight: 500;
            margin-left: 10rpx;
          }

          .em-desc {
            font-size: 26rpx;
            color: #666;
            margin-left: 10rpx;
          }

          text {
            font-size: 26rpx;
            color: #666;
            margin-left: 10rpx;
          }

          .amount {
            font-weight: bold;
            color: #333;
          }
        }
      }
    }

    .menu-list {
      margin: 30rpx;
      background: #fff;
      border-radius: 16rpx;
      overflow: hidden;
    }

    .logout-section {
      margin: 30rpx;

      .logout-btn {

        width: 100%;

        height: 90rpx;

        line-height: 90rpx;

        text-align: center;

        background-color: #fff;

        color: #ff4d4f;

        font-size: 32rpx;

        border-radius: 16rpx;

        border: none;



        &:active {

          background-color: #f5f5f5;

        }

      }
    }

    .version {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #999;
      font-size: 24rpx;
      padding: 40rpx 0;
    }
  }
</style>